<template>
  <el-card class="comment-item">
    <el-row justify="space-between" class="comment-header">
      <el-col :span="1">
        <el-avatar :src="comment.avatar" :alt="comment.username" />
      </el-col>
      <el-col :span="23" class="comment-info">
        <div class="comment-username">{{ comment.username }}</div>
        <div class="comment-content">{{ comment.content }}</div>
      </el-col>
    </el-row>
    <el-row class="comment-actions">
      <div class="comment-time comment-meta">{{ comment.createdAt }}</div>
      <el-button type="text" size="small" @click="$emit('likeComment', comment)">点赞</el-button>
      <el-button type="text" size="small" @click="$emit('replyToComment', comment)">回复</el-button>
    </el-row>

    <!-- 使用 el-collapse 展示子评论 -->
    <el-collapse v-if="comment.children && comment.children.length > 0" class="children-comments">
      <el-collapse-item title="查看子评论" :name="comment.commentId.toString()">
        <!-- 确保 CommentItem 能正常渲染子评论 -->
        <div v-for="child in comment.children" :key="child.commentId">
          <CommentItem
              :comment="child"
              @likeComment="likeComment"
              @replyToComment="replyToComment"
          />
        </div>

      </el-collapse-item>
    </el-collapse>
  </el-card>
</template>

<script setup>
import {defineProps, defineEmits, ref} from 'vue';
import {ChatLineRound} from "@element-plus/icons-vue";

const props = defineProps({
  comment: Object
});

const emit = defineEmits(['likeComment', 'replyToComment']);


const likeComment = (comment) => {
  emit('likeComment', comment);
};

const replyToComment = (comment) => {
  emit('replyToComment', comment);
};
</script>

<style scoped>

.comment-item {
  margin-bottom: 15px; /* 增加评论之间的间距 */
}

.comment-header {
  display: flex;
  align-items: center;
}

.comment-info {
  display: flex;
  flex-direction: column;
}

.comment-username {
  font-weight: bold;
  color: #0073ff;
  margin-bottom: 5px;
}

.comment-content {
  font-size: 0.9rem;
  color: #333;
  line-height: 1.5;
}

.comment-meta {
  text-align: right;
  font-size: 0.8rem;
  color: #888;
}

.comment-actions {
  align-items: center;
  margin-left: 50px;
  margin-top: 10px;
}

.children-comments {
  padding-left: 20px;
}
</style>
